<template>
    <div
        class="goods-format"
        @click="selectFormat"
    >
        <div class="goods-format-title">已选</div>
        <div class="goods-format-info">
            <div
                v-for="(item,index) of formatNow"
                :key="index"
            >
                <span v-if="index>0">，</span>
                <span>{{item}}</span>
            </div>
            <div><span v-if="formatNow.length>0">，</span>{{goodsNum}}件</div>
        </div>
        <img
            class="goods-format-more"
            src="@/assets/images/goodsDetail/format-more.png"
        />
    </div>
</template>

<script>
export default {
    name: 'GoodsFormat',
    props: ['formatNow', 'goodsNum'],
    methods: {
        selectFormat() {
            this.$emit('selectFormat')
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-format
    display flex
    align-items center
    height 1.15rem
    padding 0 0.4rem
    background #fff
    margin-top 0.18rem
    .goods-format-title
        font-size 0.37rem
        color #888
        line-height 1
    .goods-format-info
        display flex
        flex 1
        font-size 0.37rem
        color #888
        line-height 1
        padding 0 0.4rem
    .goods-format-more
        width 0.53rem
</style>

